<template>
  <div class="majority"> <!--与tabbar一级的-->
    <div class="operator">
      <el-input v-model="input" style="width: 240px;height: 34px;margin: 0 20px 0 20px" placeholder="Please input" />
      <el-button type="success" :icon="Search" @click="searchItem(input)">查询</el-button>
    </div>
    <div class="tableList">
      <el-table
          stripe
          border
          ref="multipleTableRef"
          :data="currentTableData"
          style="width: 100%;margin-left: 20px"
          @selection-change="handleSelectionChange"
      >
        <!--          选项改变时触发函数-->
        <el-table-column type="selection" width="55" />
        <el-table-column property="reserveId" label="id"  />
        <el-table-column property="sId" label="学生id"  />
        <el-table-column property="coId" label="课程id"  />
        <el-table-column property="reserveTime" label="预约时间" show-overflow-tooltip :fromatter="formatData"/>
        <el-table-column property="reserveAccept" label="预约状态"  >
          <template #default="scope">
            <label v-if="scope.row.reserveAccept==='0'">未接受</label>
            <label v-if="scope.row.reserveAccept==='1'">已接受</label>
            <label v-if="scope.row.reserveAccept==='2'">已拒绝</label>
          </template>
        </el-table-column>
        <el-table-column property="operator" label="操作" >
          <template #default="scope">
            <el-button size="small" @click="handleEdit( scope.row)">
              同意
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete( scope.row)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :small="false"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="totalItems"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {Search,Plus,Delete} from "@element-plus/icons-vue";
</script>
<script>
import {ref} from "vue";
import request from "@/util/request";
import {ElMessage} from "element-plus";
export default {
  name: "AllConserveCord",
  data(){
    return{
      input:ref(""),
      tableData:[],
      currentTableData:[],
      totalItems:ref(0),
      currentPage:ref(1),
      pageSize:ref(7),
    }
  },
  methods:{
    searchItem(input){
      if(input===''){
        this.getData()
      }else{
        request.post("/api/reservation/getBysid?sId="+input).then(res=>{
          this.currentTableData=res
          this.input=""
          console.log("找到了")
        })
      }
    },
    formatData(cellValue){
      var s =	new Date(cellValue).toLocaleString();
      return s;
    },
    getData(){
      request.post("/api/reservation/getallWithAccept0").then(res=>{
        if(res!=null){
          this.tableData=res
          this.currentPage=1
          this.totalItems=this.tableData.length
          this.currentTableData = this.tableData.filter((item, index) => index < this.pageSize)
        }

      })
    },
    handleSelectionChange(val){
      console.log("选择的值为：")
      console.log(val)
    },
    handleEdit(row){
      let data={
        reserveId:row.reserveId,
        reserveAccept:1
      }
      request.post("/api/reservation/update1",data).then(res=>{
        ElMessage.success("成功")
        this.getData()
      })
    },
    handleDelete(row){
      let data={
        reserveId:row.reserveId,
        reserveAccept:2
      }
      request.post("/api/reservation/update1",data).then(res=>{
        ElMessage.success("成功")
        this.getData()
      })
    },
    handleCurrentChange(page){
      this.currentPage=page
      const index = this.pageSize * (page - 1)
      const nums = this.pageSize * page
      const tables = []
      for (let i = index; i < nums; i++) {
        if (this.tableData[i]) tables.push(this.tableData[i])  //看看这里
      }
      this.currentTableData = tables
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
.majority{
  width: 100%;
  height: 80vh;
}
.operator{
  display: flex;
  width: 100%;
  height: 10vh;
}
.tableList{
  width: 100%;
  height: 60vh;
}
.demo-pagination-block{
  display: flex;
  width: 100%;
  justify-content: center;
}
</style>